import { ProCard } from "@ant-design/pro-components"
import { ProFormDateYearRangePicker } from "@ant-design/pro-form"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { useSetState } from "ahooks"
import { DatePicker } from "antd"
import dayjs from "dayjs"
import { useEffect } from "react"
import { useModel } from "@sker/sdk"
import { FjOtaAccount, FjPrice } from "@sker/model"

export const GunttChartDate: React.FC<{}> = ({ }) => {
    const model = useModel(FjPrice)
    const fenxiao = useModel(FjOtaAccount)
    const [params, setParams] = useSetState<any>({
        year: dayjs(),
    })
    const getFenxiaoOptions = async () => {
        const allFenxiao = await fenxiao.findAll(['name', 'name_cn']).then(res => res.data)
        const fenxiaoOptions: any = {};
        allFenxiao.map(it => {
            Reflect.set(fenxiaoOptions, it.name, it.name_cn)
        })
        return fenxiaoOptions;
    }
    const getRandomColor = () => {
        let color = `#`;
        while (color.length !== 7) {
            color += '0123456789abcdef'[Math.floor(Math.random() * 16)]
        }
        return color;
    }
    const init = async () => {
        const year = dayjs(params.year).format('YYYY')
        const list = await model.findAll(['pid', 'id', 'title', 'level', 'val', 'display_order', 'ota', 'start', 'end'], [{
            field: 'start',
            operator: 'gte',
            value: `${year}-01-01 00:00:00`
        }, {
            field: 'end',
            operator: 'lte',
            value: `${year}-12-30 23:59:59`
        }]).then(res => res.data)
        const options = await getFenxiaoOptions()
        const items: any[] = [];
        list.map(price => {
            const otas = price.ota.split(',')
            const otaTitle = otas.map(ota => ({
                code: ota,
                title: options[ota]
            }))
            otaTitle.map(({ code, title }) => {
                const item = items.find(it => it.code === code)
                if (item) {
                    item.items.push(price)
                } else {
                    const obj: any = {
                        code,
                        title,
                        color: getRandomColor(),
                        items: [price]
                    }
                    items.push(obj)
                }
            })
            setParams({ items: items })
        })
        console.log({ list, options })
        setParams({
            columns: [
                { title: `${year}年度`, dataIndex: 'title' },
                {
                    title: `01月`,
                    render: (_: any, record: any) => {
                        console.log({ record })
                        return <div style={{ backgroundColor: record.color }}>
                            {record.items.map((item: any) => {
                                console.log({ item })
                                return <div>{item.start}{item.end}</div>
                            })}
                        </div>
                    }
                },
                { title: `02月`, },
                { title: `03月`, },
                { title: `04月`, },
                { title: `05月`, },
                { title: `06月`, },
                { title: `07月`, },
                { title: `08月`, },
                { title: `09月`, },
                { title: `10月`, },
                { title: `11月`, },
                { title: `12月`, },
            ] as ProColumns[]
        })
    }
    useEffect(() => {
        init()
    }, [params.year])
    return <ProCard extra={<div>
        <DatePicker.YearPicker value={params.year} onChange={e => {
            setParams({ year: e })
        }} />
    </div>}>
        <ProTable
            search={false}
            toolBarRender={false}
            columns={params.columns}
            rowKey={'code'}
            dataSource={params.items}
        />
    </ProCard>
}
